<template>
  <el-dialog
    title="设备列表"
    :visible.sync="showDetailDialog"
    @close="closeModel"
    >
    <div style="width: 100%;text-align: center">
      <el-row>
        <el-button type="success" style="float: right;margin: 0 10px 0 0" size="mini" @click="showExport">导出到excel</el-button>
      </el-row>
      <el-row style="padding-bottom: 10px">
        <el-col :span="5">
          <li style="font-size: 10px">设备最高能耗：{{maxEc}}度</li>
        </el-col>
        <el-col :span="5">
          <li style="font-size: 10px">设备最低能耗：{{minEc}}度</li>
        </el-col>
        <el-col :span="5">
          <li style="font-size: 10px">设备平均能耗：{{avgEc}}度</li>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            type="expand"
            label="设备详情"
            align="center"
            width="80px"
          >
            <template slot-scope="props" style="padding:0">
              <el-form
                label-position="left"
                inline
                class="demo-table-expand"
              >
                <el-form-item label="设备型号:">
                  <span>{{ props.row.model }}</span>
                </el-form-item>
                <el-form-item label="IP:">
                  <span>{{ props.row.ip }}</span>
                </el-form-item>
                <el-form-item label="端口:">
                  <span>{{ props.row.port }}</span>
                </el-form-item>
                <el-form-item label="编号:">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="区域:">
                  <span>{{ props.row.location }}</span>
                </el-form-item>
                <el-form-item label="使用单位:">
                  <span>{{ props.row.dept }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="设备名称"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="num"
            label="回路内设备数量"
            width="140px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="设备类型"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="totalEc"
            label="总能耗"
            align="center"
          >
            <template slot-scope="prop">
              <span>{{prop.row.totalEc}}度</span>
            </template>
          </el-table-column>
          <el-table-column
            label="图表"
            align="center"
          >
            <template slot-scope="props">
              <el-button size="mini" icon="el-icon-s-data" @click="showDetails(props.row.chartData,props.row.name)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-dialog
        title="设备能耗统计图表"
        :visible.sync="showData"
        @close="closeDetails"
        append-to-body
      >
        <el-row>
          <el-col :span="6">
            <li style="text-align: left">{{deviceName}}</li>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" :offset="18">
            <el-radio v-model="chartType" label="line">折线</el-radio>
            <el-radio v-model="chartType" label="histogram">柱形</el-radio>
          </el-col>
        </el-row>
        <template>
          <ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
        </template>
      </el-dialog>
    </div>
    <export-excel
      :showExportExcel="showExportExcel"
      :tableData="exportData"
      @closeExport="closeExport"
    ></export-excel>
  </el-dialog>
</template>
<script>
  import VeChart from 'v-charts/lib/chart'
  import exportExcel from "../../../../components/export/exportExcel.vue";
  import Axios from "axios";

  export default {
    components:{
      VeChart,
      exportExcel
    },
    props:{
      showDetailDialog: Boolean,
      tableData: [],

      maxEc: '',
      minEc: '',
      avgEc: ''
    },
    data(){
      return{
        showExportExcel: false,
        showData: false,
        chartType: 'line',
        chartSettings:{
          type:'line',
          yAxisName:['用电量'],
          xAxisName:['时间轴'],
          barMaxWidth:40
        },
        chartData: {},
        deviceName: '',
        exportData: []
      }
    },
    methods:{
      showExport(){
        console.log(this.tableData)
        this.tableData.forEach(item => {
          this.exportData.push({
            deviceId: item.id,
            name: item.name+'-'+item.model,
            num: item.num,
            type: item.type,
            totalEc: item.totalEc,
            model: item.model,
            ip: item.ip,
            port: item.port,
            location: item.location,
            building: item.building,
            room: item.room,
            roomType: item.roomType,
            dept: item.dept,
            addressCode: item.addressCode
          })
        })
        this.showExportExcel = true
      },
      closeExport(){
        this.exportData = []
        this.showExportExcel = false
      },
      showDetails(item,name){
        this.chartData = item
        this.deviceName = name
        this.showData = true
      },
      closeModel(){
        this.chartType = 'line'
        this.$emit('closeModel')
      },
      closeDetails(){
        this.showData = false
      }
    },
    watch: {
      chartType(newVal){
        this.chartSettings.type = newVal
      }
    }
  }
</script>
<style scoped>
  .el-dialog__wrapper >>> .el-dialog__body {
    padding: 0;
  }
  .el-dialog__wrapper >>> .el-dialog{
    border-radius: 10px;
  }
</style>
